<template>
  <div class="dashboard">
    <div class="page-header">
      <h1>管理员仪表板</h1>
      <p>欢迎使用环保公众监督系统管理后台</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card success">
          <div class="stat-number">{{ totalFeedbacks }}</div>
          <div class="stat-label">反馈总数</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card warning">
          <div class="stat-number">{{ pendingFeedbacks }}</div>
          <div class="stat-label">待分配</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card info">
          <div class="stat-number">{{ assignedFeedbacks }}</div>
          <div class="stat-label">已分配</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card danger">
          <div class="stat-number">{{ confirmedFeedbacks }}</div>
          <div class="stat-label">已确认</div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 功能快捷入口 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :xs="24" :md="12">
        <el-card header="快捷操作">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              icon="el-icon-document"
              @click="$router.push('/admin/feedbacks')"
            >
              反馈管理
            </el-button>
            <el-button 
              type="success" 
              icon="el-icon-user"
              @click="$router.push('/admin/grid-members')"
            >
              网格员管理
            </el-button>
            <el-button 
              type="info" 
              icon="el-icon-data-analysis"
              @click="$router.push('/admin/statistics')"
            >
              统计报表
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12">
        <el-card header="系统信息">
          <div class="system-info">
            <p><strong>当前用户：</strong>{{ userInfo.adminCode || '管理员' }}</p>
            <p><strong>登录时间：</strong>{{ loginTime }}</p>
            <p><strong>系统版本：</strong>v1.0.0</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      totalFeedbacks: 0,
      pendingFeedbacks: 0,
      assignedFeedbacks: 0,
      confirmedFeedbacks: 0
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters['user/userInfo']
    },
    loginTime() {
      return new Date().toLocaleString()
    }
  },
  created() {
    this.loadDashboardData()
  },
  methods: {
    async loadDashboardData() {
      try {
        // 这里应该调用API获取真实数据
        // 目前使用模拟数据
        this.totalFeedbacks = 1234
        this.pendingFeedbacks = 56
        this.assignedFeedbacks = 78
        this.confirmedFeedbacks = 1100
      } catch (error) {
        console.error('加载仪表板数据失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
  }
  
  .quick-actions {
    margin-top: 20px;
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.system-info {
  p {
    margin: 10px 0;
    color: #666;
  }
}
</style> 